/**
 * Created by henian.xu on 2017/7/5 0005.
 * jquery插件开发模板
 */

define(
    [
        'jquery'
    ],
    function ($) {
        var
            plugName = 'xTabs',
            plugVersion = '0.1.0',
            $doc = $(document);

        /**
         * 定义插件类构造函数
         * @param el
         * @param options
         */
        $[plugName] = function (el, options) {
            this.version = plugVersion;
            this.$target = $(el);
            this.$target.data('x-' + plugName, this);// 缓存实例对象
            var
                _super = this,
                cfg = $.extend(true, {}, $[plugName].defaults, options),
                methods = {};

            //缓存常用少变更的 jQ 对象
            this.$bar = this.$target.children('.x-tabs-bar');
            this.$barContainer = this.$bar.children('.x-tabs-bar-container');
            this.$barPrev = this.$bar.children('.x-tabs-bar-prev');
            this.$barNext = this.$bar.children('.x-tabs-bar-next');
            this.$barWrap = this.$barContainer.children('.x-tabs-bar-wrap');
            this.$barScroll = this.$barWrap.children('.x-tabs-bar-scroll');
            this.$barTabs = this.$barScroll.children('.x-tabs-tab');

            this.$content = this.$target.children('.x-tabs-content');
            this.$tabPanels = this.$content.children('.x-tabs-tabpanel');

            // 私有方法
            methods = {
                /**
                 * 插件初始化
                 */
                init: function () {
                    methods.initElement();
                    methods.initEvent();
                    methods.lazyHandle();
                },
                lazyHandle: function () {
                    if (cfg.isLazy === null)return;
                    var event = cfg.isLazy;
                    $(event.target).trigger(event);
                },
                initElement: function () {
                    _super.$barScroll._width = _super.$barScroll.width();
                    _super.$barWrap._width = _super.$barWrap.width();
                    if (_super.$barScroll._width < _super.$barWrap._width) {
                        _super.$barContainer.removeClass('x-tabs-bar-container-scrolling');
                        return;
                    }
                    if (!_super.$barPrev.length) {
                        _super.$barPrev = $('<div class="x-tabs-bar-prev"></div>');
                        _super.$barContainer.prepend(_super.$barPrev);
                    }
                    if (!_super.$barNext.length) {
                        _super.$barNext = $('<div class="x-tabs-bar-next"></div>');
                        _super.$barContainer.prepend(_super.$barNext);
                    }
                    _super.$barContainer.addClass('x-tabs-bar-container-scrolling');
                },
                initEvent: function () {
                    _super.$bar.on('click', '.x-tabs-tab', methods.onTabClick);
                    _super.$bar.on('click', '.x-tabs-bar-prev', methods.onBarPrev);
                    _super.$bar.on('click', '.x-tabs-bar-next', methods.onBarNext);
                },
                onTabClick: function (e) {
                    console.log('onTabClick');
                    methods.gotoTab($(this));
                },
                onBarPrev: function (e) {
                    console.log('onBarPrev');
                },
                onBarNext: function (e) {
                    console.log('onBarNext');
                },
                gotoTab: function ($target) {
                    var index = _super.$barTabs.index($target);
                    _super.$barTabs.removeClass('active').eq(index).addClass('active');
                    _super.$tabPanels.removeClass('active').eq(index).addClass('active');
                    methods.showTab($target);
                },
                showTab: function ($target) {
                    var offset = _super.$barScroll._offset || 0,
                        position = $target.position(),
                        left = position.left + offset,
                        right = (position.left + $target.outerWidth() + offset) - _super.$barWrap.width();
                    if (left < 0) {
                        _super.$barScroll._offset = offset -= left;
                    } else if (right > 0) {
                        _super.$barScroll._offset = offset -= right;
                    }
                    _super.$barScroll.animate({'left': offset}, 300);
                }
            };
            methods.init();
        };

        // 公开方法
        var plugPro = $[plugName].prototype; // 简化原形

        /**
         * 注册插件
         * @param options
         * @returns {*}
         */
        $.fn[plugName] = function (options) {
            options = options || {};
            if ($.type(options) === 'object') {
                return this.each(function () {
                    var $plug = $(this).data('x-' + plugName);
                    if ($plug === undefined) {
                        new $[plugName](this, options);
                    } else {
                        // 实例对象已经存在
                    }
                });
            } else {
                // 其它参数类型
            }
        };

        // 默认设置
        $[plugName].defaults = {
            isLazy: null, // 一个事件对象
        };

        // 惰性实例化插件
        $doc.on('click', '.x-tabs', function (e) {
            var
                $this = $(this);
            if ($this.data('x-' + plugName) !== undefined)return;
            new $[plugName](this, {isLazy: e});
        });

        return $[plugName];
    }
);
